<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.10.2.min.js"></script>
	</head>
	<body>
		<input type="text" name="" id="input" value="" />
		<ul id="list">

		</ul>
		<button id="button">点击</button>
		<script type="text/javascript">
			function Page(){
				
			}
			//MVP模式 
			$.extend(Page.prototype, {
				init: function(){
					this.bindEvent();
				},
				bindEvent: function(){
					var btn = $("#button");
					btn.on('click', $.proxy(this.handleBtnClick, this));//proxy使this永久指向page实例，而不是button
				},
				handleBtnClick: function(){
					console.log(this);//Page{}
					var input = $("#input");
					var inputValue = input.val();
					var ulElem = $("#list");
					ulElem.append('<li>'+ inputValue +'</li>');
					input.val("");
				}
			});
			var page = new Page();
			page.init();
			
		</script>
	</body>
</html>
